<template>
  <div>
    <el-card shadow="never" class="aui-card--fill el-card--msg">
      <el-collapse-transition>
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
          <el-form-item>
            <el-date-picker v-model="dateRange" type="daterange" :range-separator="$t('to')" :start-placeholder="$t('beginDate')"
              :end-placeholder="$t('endDate')"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button @click="fnRefresh()" type="primary">{{ $t('query') }}</el-button>
            <el-button @click="searchReset()">{{ $t('reset') }}</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-transition>
      <div class="crud__menu">
        <div class="crud__left">
          <el-form :inline="true">
            <el-form-item>
              <el-radio-group v-model="dataForm.readStatus">
                <el-radio-button v-for="status in this.baseData.statusList" :key="status.val" :label="status.val">{{
                  status.label }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="$hasPermission('msg:msgRecord:delete')">
              <el-button type="danger" @click="deleteHandle()">{{ $t('delete') }}</el-button>
            </el-form-item>
            <el-form-item class="el-form-item--msg" v-if="$hasPermission('msg:msgRecord:updateStatus')">
              <el-button-group>
                <el-button @click="updateReadStatus(1)">{{ $t('msgRecord.setRead') }}</el-button>
                <el-button @click="updateReadStatus(0)">{{ $t('msgRecord.setNoRead') }}</el-button>
              </el-button-group>
            </el-form-item>
          </el-form>
        </div>
        <div class="crud__right">
          <vxe-toolbar>
            <template v-slot:tools>
              <el-button icon="el-icon-refresh" @click="getDataList()" circle></el-button>
            </template>
          </vxe-toolbar>
        </div>
      </div>
      <el-container class="el-container--privilege">
        <el-main>
          <el-container>
            <el-aside width="150px">
              <el-form :inline="true" :model="dataForm">
                <el-form-item class="form-item--tabs">
                  <el-tabs ref="tabs" tab-position="left" v-model="dataForm.type">
                    <el-tab-pane name="all">
                      <span slot="label">
                        {{ '全部消息' }}
                      </span>
                    </el-tab-pane>
                    <el-tab-pane v-for="item in this.typeListMsg" :key="item.val" :name="item.val" :label="item.label">
                      <span slot="label">
                        {{ item.label }}
                        <el-badge :value="item.badge" :max="99" :hidden="item.badge<=0" size="mini" class="item">
                        </el-badge>
                      </span>
                    </el-tab-pane>
                  </el-tabs>
                </el-form-item>
              </el-form>
            </el-aside>
            <el-main>
              <MsgInfo v-show="msgInfoShow" v-bind:fnChangeShowInfo="fnChangeShowInfo" v-bind:infoData="infoData"
                v-bind:updateReadStatus="updateReadStatus">
              </MsgInfo>
              <div v-show="!msgInfoShow">
                <!-- <el-table highlight-current-row v-loading="dataListLoading" :data="dataList" border
                  @selection-change="dataListSelectionChangeHandle" :row-class-name="tableRowClassName"
                  style="width: 100%;"> -->

                <vxe-table :loading="dataListLoading" :data="dataList" ref="xTable" auto-resize class="vxe-table-element"
                  remote-sort @sort-change="dataListSortChangeHandle" @select-change="dataListSelectionChangeHandleVex"
                  @select-all="dataListSelectionAllChangeHandleVex">
                  <vxe-table-column type="selection" header-align="center" align="center" width="50"></vxe-table-column>
                  <vxe-table-column field="title" title="msgRecord.title" header-align="center" align="left"
                    :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <a @click="fnShowInfo(scope.row)">{{ scope.row.title }}</a>
                    </template>
                  </vxe-table-column>
                  <vxe-table-column field="sendDate" title="msgRecord.sendDate1" header-align="center" align="center"
                    width="180" sortable></vxe-table-column>
                  <vxe-table-column field="level" title="msgRecord.level" header-align="center" align="center" width="100">
                    <template slot-scope="scope">{{ $getDataItem(baseData.levelList, scope.row.level).label }}</template>
                  </vxe-table-column>
                  <vxe-table-column field="type" title="msgRecord.type" header-align="center" align="center" width="120"
                    sortable>
                    <template slot-scope="scope">
                      {{ $getDictLabel(baseData.CODE_TYPE, scope.row.type) }}
                    </template>
                  </vxe-table-column>
                </vxe-table>
                <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
                  layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle"></el-pagination>
              </div>
            </el-main>
          </el-container>
        </el-main>
      </el-container>
    </el-card>
  </div>
</template>
<style >
.el-table .read-row,
.read-row a {
  color: #c0c0c0;
}
.el-card--msg a:hover {
  cursor: pointer;
}
.form-item--tabs .el-tabs__item span {
  float: left;
}
.el-card--msg .crud__menu {
  margin-bottom: 0px;
}
.el-card--msg .body_right {
  margin-left: 20px;
}
</style>

<script>
import mixinViewModule from '@/mixins/view-module'
import MsgInfo from './msgRecord-info'
import staticData from './msgRecord.json'
import cloneDeep from 'lodash/cloneDeep'

export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/msg/msgRecord/myMsg',
        getDataListIsPage: true,
        deleteURL: '/msg/msgRecord',
        deleteIsBatch: true
      },
      msgInfoShow: false,
      baseData: staticData,
      typeList: this.$getDictList(staticData.CODE_TYPE, true),
      typeListMsg: [],
      dateRange: '',
      infoData: {},
      sumMsgData: [],
      dataForm: {
        searchFlag: '2',
        readStatus: '0',
        type: 'all'
      }
    }
  },
  watch: {
    // 条件变化
    'dataForm': {
      deep: true,
      handler: function (newVal, oldVal) {
        this.msgInfoShow = false
        this.fnRefresh()
      }
    },
    // 选择时间 目前array做条件会异常单独处理
    'dateRange': function () {
      if (this.dateRange) {
        this.dataForm.sendDateB = this.$formatDate(this.dateRange[0])
        this.dataForm.sendDateE = this.$formatDate(this.dateRange[1])
      } else {
        this.dataForm.sendDateB = this.dataForm.sendDateE = ''
      }
      this.msgInfoShow = false
      this.fnRefresh()
    },
    // 更新统计信息时
    'sumMsgData': {
      deep: true,
      handler: function () {
        let array = this.typeList
        for (let index = 0; index < array.length; index++) {
          array[index].badge = this.fnGetBadgeValue(array[index].val)
          this.$set(array, index, array[index])
        }
        this.typeListMsg = cloneDeep(array)
        this.$forceUpdate()
      }
    }
  },
  activated () {
    this.fnGetSumMsg()
    // 通过路由参数pid, 控制列表请求操作
    if (this.$route.params.msgId) {
      let row = this.$route.params
      this.fnShowInfo(row)
    } else {
    }
  },
  components: {
    MsgInfo
  },
  methods: {
    // 获取信息
    fnShowInfo (row) {
      this.$http.get(`/msg/msgRecord/${row.msgId}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.infoData = res.data
          this.msgInfoShow = true
          this.updateReadStatus(1, row.id)
        })
        .catch(() => { })
    },
    // 详细信息切换
    fnChangeShowInfo () {
      this.msgInfoShow = !this.msgInfoShow
    },
    // 设置已读样式
    tableRowClassName ({ row, rowIndex }) {
      if ((row.readStatus || '').toString() === '1') {
        return 'read-row'
      }
      return ''
    },
    // 数据更新
    fnRefresh () {
      this.$nextTick(() => {
        this.fnGetSumMsg()
        this.getDataList()
      })
    },
    // 获取类型的统计信息
    fnGetSumMsg () {
      this.$http.get(`/msg/msgRecord/sumMyMsg`, { params: { searchFlag: '1' } })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.sumMsgData = res.data
        })
        .catch(() => { })
    },
    // 匹配类型的统计数量
    fnGetBadgeValue (key) {
      if (this.sumMsgData) {
        let keyData = this.sumMsgData.filter(item => item.type === key)[0]
        if (keyData) {
          return keyData.cnt
        }
      }
      return 0
    },
    // 未读已读
    updateReadStatus (readStatus, id) {
      if (!(this.dataListSelections && this.dataListSelections.length > 0)) {
        if (!id) {
          return this.$message.error(this.$t('prompt.select'))
        }
      }
      let data = {
        readStatus: readStatus,
        ids: id || this.dataListSelections.map(d => d.id).join(',')
      }
      this.$http.post('/msg/msgRecord/updateReadStatus', data, { headers: { 'content-type': 'application/x-www-form-urlencoded' } }).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        if (!id) {
          this.$message.success(this.$t('prompt.success'))
        }
        this.fnRefresh()
      }).catch(() => { })
    }
  }
}
</script>
